<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>

<style type="text/css">
    .triangle{
        width:0px;
        height:0px;
        border-right:6px solid transparent;
        border-left:6px solid transparent;
        border-bottom:6px solid #0984e3;

    }

    .line{
        border-bottom:2px solid #0984e3;
    }

    .btn{
        background-color: #ffbe76;
        color: white
    }

    /*需要切换的hover类*/
    .hover{
        background-color:#f9ca24;
        color: white;
        /*font-weight: bold;*/
    }

</style>

<script type="text/javascript">
    // 鼠标移入移出事件
    $('.btn6').hover(function() {
        // 鼠标移入时添加hover类
        $(this).addClass('hover')
    }, function() {
        // 鼠标移出时移出hover类
        $(this).removeClass('hover')
    });
</script>

<body>

    <div style="width: 93%;margin-left: 30px;padding-bottom: 20px;">
        <div class="row" style="background-color: white; padding: 0px 10px 30px 10px" >
            <span style="font-size: 16px; color: #0984e3">积分概况</span>
            <a href="#" style="float: right; padding-top: 5px"><span style="font-size: 13px;">积分说明</span></a>
            <div class="triangle" style="margin-left: 20px"></div>
            <div class="line"></div>
            <div style="border: 1px solid #dcdde1;height: 80px">
                <div style="float: left;padding: 10px 10px;width: 49%">
                    <span>当前积分</span>
                    <br>
                    <span style="font-size: 27px; color: #27ae60">0</span>
                </div>
                <div style="float: left; border-left: 1px dotted #718093; width: 1%;height: 100%"></div>
                <div style="float: left; padding-top: 20px;padding-left: 160px">
                    <button class="btn btn6" >积分兑换好礼</button>
                </div>
            </div>
        </div>

        <div class="row" style="background-color: white; padding: 0px 10px 30px 10px" >
            <span style="font-size: 16px; color: #0984e3">积分明细</span>
            <div class="triangle" style="margin-left: 20px"></div>
            <div class="line"></div>
            <div style="border: 1px solid #dcdde1;height: 50px;padding: 10px">
                <div style="background-color: #f1f2f6;width: 100%;height: 25px;padding-top: 2px">
                    <div style="width: 20%; text-align: center;float: left;">
                        积分日期
                    </div>
                    <div style="width: 20%; text-align: center;float: left;">
                        来源
                    </div>
                    <div style="width: 20%; text-align: center;float: left;">
                        积分数
                    </div>
                    <div style="width: 20%; text-align: center;float: left;">
                        可兑换积分
                    </div>
                    <div style="width: 20%; text-align: center;float: left;">
                        有效期
                    </div>
                </div>
            </div>
        </div>

    </div>



</body>
</html>